<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <input type="text" name="name" onblur="doCheck()"><br>
    <span></span>
</form>
<button onclick="doSave()">保存</button>
</body>
<script>
    function GetAjax(url,param,callback){
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                callback(xhr.responseText);
            }
            xhr.open("GET",url+"?"+param,true);
            xhr.send(null);
        }
    }
    function PostAjax(url,param,callback){
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                callback(xhr.responseText);
            }
            xhr.open("POST",url,true);
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            //4.发送请求
            xhr.send(param);//Post请求send方法传值

        }
    }
    function doCheck(){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                document.getElementsByTagName("span")[0].innerHTML = xhr.responseText;
            }
        };
        var name = document.forms[0].name.value;
        xhr.open("GET",`http://localhost:8081/ajaxName?name=${name}`,true);
        xhr.send(null);
    }
    function doSave(){
        //1.创建XHR对象
        var xhr=new XMLHttpRequest();
        //2.设置状态监听
        xhr.onreadystatechange=function(){
            if(xhr.readyState===4&&xhr.status===200){
                document.getElementsByTagName("span")[0].innerHTML="<font color='red'>"+xhr.responseText+"</font>";
            }
        };
        //3.打开链接
        //var name=document.getElementById("nameId").value;
        var  name=document.forms[0].name.value;
        xhr.open("POST","/doSave",true);
        //post请求要设置请求头(规定)
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        //4.发送请求
        xhr.send("name="+name);//Post请求send方法传值

    }

</script>
</html>